<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>消息验证</title>
	<link href="<%=request.getContextPath()%>/static/demo/style_log.css"
		rel="stylesheet" type="text/css">
		<link rel="stylesheet" type="text/css"
			href="<%=request.getContextPath()%>/static/demo/style.css">
			<link rel="stylesheet" type="text/css"
				href="<%=request.getContextPath()%>/static/demo/userpanel.css">
				<link rel="stylesheet" type="text/css"
					href="<%=request.getContextPath()%>/static/demo/jquery.ui.all.css">
</head>
	<script type="text/javascript"
		src="<%=request.getContextPath()%>/static/jquery.min.js"></script>
	<script type="text/javascript"
		src="<%=request.getContextPath()%>/static/socket.js"></script>
<style>

.broad_text {
	color: white;
	background-color: rgb(16, 238, 110);
	font-size: 18px;
	border-radius: 5px;
	padding: 2px;
}

.narrow_text {
	color: white;
	background-color: rgb(178, 116, 46);
	font-size: 18px;
	border-radius: 5px;
	padding: 2px;
}
</style>	
	
	<script type="text/javascript">
    var websocket = null;
    var fromName='${SESSION_USERNAME}';
    if ('WebSocket' in window) {
        //Websocket的连接
        websocket = new WebSocket("ws://"+window.location.host+"/cxf/socket/websocket.do");//WebSocket对应的地址
    }
    else if ('MozWebSocket' in window) {
        //Websocket的连接
        websocket = new MozWebSocket("ws://"+window.location.host+"/cxf/websocket.do");//WebSocket对应的地址
    }
    else {
        //SockJS的连接
      //如果是低版本的浏览器，则用SockJS这个对象，对应了后台“sockjs/websocket.ws”这个注册器，
      //它就是用来兼容低版本浏览器的
        websocket = new SockJS("http://"+window.location.host+"/cxf/sockjs/websocket.ws"); //SockJS对应的地址
    }
    websocket.onopen = onOpen;
    websocket.onmessage = onMessage;
    websocket.onerror = onError;
    websocket.onclose = onClose;
 
    function onOpen(openEvt) {
        //alert(openEvt.Data);
    }
 
    function onMessage(evt) {
    	var data=JSON.parse(evt.data);
    	var textCss=data.from=="BROADCUST"?"broad_text":"narrow_text";
    	$("#showMsg").append("<div><label>"+data.fromName+" "+data.date+"</label><div class='"+textCss+"'>"+data.text+"</div></div>");
    	scrollToBottom();
    }
    
    function onError() {
    }
    
    function onClose() {
    }
 
    function doSend() {
        if (websocket.readyState == websocket.OPEN) {
        	var msg = document.getElementById("tMsg").value;
        	var data={};
        	data["from"]=fromName;
        	data["fromName"]=fromName;
        	data["to"]="";
        	data["text"]=msg;
        	websocket.send(JSON.stringify(data));
        	var textCss=data.from=="BROADCUST"?"broad_text":"narrow_text";
        	$("#showMsg").append("<div><label>"+fromName+" "+new Date().Format("yyyy-MM-dd hh:mm:ss")+"</label><div class='"+textCss+"'>"+data.text+"</div></div>");
			$("#tMsg").val("");
        } else {
            alert("连接失败!");
        }
    }
 
    window.close = function () {
        websocket.onclose();
    }
    
    function sendBack(){
    	doSend();
    }
    
    
    function sendAll(){
    	var url = "${pageContext.request.contextPath}/sendMsg";
        var content =  $("#tMsg").val();
        if(content == null || content ==""){
        	return ;
        }
        $.ajax({
            data: "content=" + content,
            type: "POST",
            dataType: 'text',
            async: false,
            contentType: "application/x-www-form-urlencoded;charset=UTF-8",
            encoding: "UTF-8",
            url: url,
            success: function (data) {
            	$("#tMsg").val("");
            },
            error: function (msg) {
            	$("#tMsg").val("");
                alert(msg);
            },

        });
    }
    
    function scrollToBottom(){
    	var div = document.getElementById('showMsg');
    		  div.scrollTop = div.scrollHeight;
    	}
    
    
    Date.prototype.Format = function (fmt) {
       var o = {
           "M+": this.getMonth() + 1, //月份 
           "d+": this.getDate(), //日 
           "h+": this.getHours(), //小时 
           "m+": this.getMinutes(), //分 
           "s+": this.getSeconds(), //秒 
           "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
           "S": this.getMilliseconds() //毫秒 
       };
       if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
       for (var k in o)
       if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
       return fmt;
    }
 
    $(function(){
        $('#sendAll').on('keypress',function(event){ 
            if(event.keyCode == 13)      
            {  
            	sendAll();
            }  
        });
    })
    
</script>
<body>
	<div style="width:660px; margin:0px auto;text-align: center;">
	 <h2>当前登录用户：<font style="font-weight: bold;">${SESSION_USERNAME}</font></h2><br>
    <input type="text" id="tMsg">
<!--      <input type="button" class="sub_button" -->
<!-- 						name="sendBack" id="sendBack" value="单独发送" style="opacity: 0.7;" onclick="sendBack()">  -->
	<input type="button" class="sub_button"
						name="sendAll" id="sendAll" value="发送消息" style="opacity: 0.7;" onclick="sendAll()"> 
    <div id="showMsg"></div>
    </div>
</body>
</html>
